<style scoped>
  .countto-page-row {
    height: 200px;
  }

  .count-to-con {
    display: block;
    width: 100%;
    text-align: center;
  }

  .pre-code-show-con p {
    height: 30px;
    margin: 0;
  }
</style>

<template>
  <p :style="mainStyle" :class="mainClass">
    <Tooltip :content="endVal" placement="top-start" :disabled="simplify===false || unitText.length==0">
      <slot name="leftText"></slot>
      <span :style="countStyle" :class="countClass">
        <span v-show="endVal!=null" :id="countId">{{ initCount }}</span>
        <span v-show="endVal==null">--</span>
        <span style="font-size: 14px">{{ unitText }}
        </span>
      </span>
      <slot name="rightText"></slot>
    </Tooltip>

  </p>
</template>

<script>
  import CountUpC from 'countup';

  export default {
    name: 'CountTo',
    data () {
      return {
        counter: {},
        unitText: '',
        countId: 'count' + parseInt(Math.random() * 1000000)
      };
    },
    props: {
      mainClass: String,
      countClass: String,
      mainStyle: {
        type: Object,
        default: () => {
          return {
            fontSize: '16px',
            fontWeight: 500,
            color: 'gray'
          };
        }
      },
      countStyle: Object,
      initCount: {
        type: Number,
        default: 0
      },
      startVal: {
        type: Number,
        default: 0
      },
      endVal: {
        type: Number,
        required: true
      },
      simplify: {
        type: Boolean,
        default: false
      },
      duration: {
        type: Number,
        default: 2
      },
      delay: {
        type: Number,
        default: 200
      },
      uneasing: {
        type: Boolean,
        default: false
      },
      ungroup: {
        type: Boolean,
        default: false
      },
      separator: {
        type: String,
        default: ','
      },
      decimals: {
        type: Number,
        default: 0
      },
      decimal: {
        type: String,
        default: '.'
      },
      unit: {
        type: Array,
        default: () => {
          return [[3, 'K+'], [6, 'M+'], [9, 'B+']];
        }
      }
    },
    methods: {
      transformValue (val) {
        let endVal = 0;
        let unit = '';
        let len = this.unit.length;
        if (val < Math.pow(10, this.unit[0][0])) {
          endVal = val;
        } else {
          for (let i = 1; i < len; i++) {
            if (val >= Math.pow(10, this.unit[i - 1][0]) && val < Math.pow(10, this.unit[i][0])) {
              endVal = parseInt(val / Math.pow(10, this.unit[i - 1][0]));
              unit = this.unit[i - 1][1];
            }
          }
        }
        if (val > Math.pow(10, this.unit[len - 1][0])) {
          endVal = parseInt(val / Math.pow(10, this.unit[len - 1][0]));
          unit = this.unit[len - 1][1];
        }
        return {
          val: endVal,
          unit: unit
        };
      }
    },
    mounted () {
      this.$nextTick(() => {
        setTimeout(() => {
          let endVal = 0;
          let res = {};
          if (this.simplify) {
            res = this.transformValue(this.endVal);
            endVal = res.val;
            this.unitText = res.unit;
          } else {
            endVal = this.endVal;
          }
          let counter = {};
          this.counter = counter = new CountUpC(this.countId, this.startVal, endVal, this.decimals, this.duration, {
            useEasing: !this.uneasing,
            useGrouping: !this.ungroup,
            separator: this.separator,
            decimal: this.decimal
          });
          if (!counter.error) {
            counter.start();
          }
        }, this.delay);
      });
    },
    watch: {
      endVal (val) {
        let endVal = 0;
        if (this.simplify) {
          let res = this.transformValue(this.endVal);
          endVal = res.val;
          this.unitText = res.unit;
        } else {
          endVal = this.endVal;
        }
        this.counter.update(endVal);
      }
    }
  };
</script>
